<template>
    <div class="wrapper">
		<div class="header">新的朋友</div>
		<div class="content">
			<div class="search">
				<div class="text">
					<input type="text" placeholder="搜索">
				</div>
				<span class="search_btn"><img src="img/search_btn.png" alt=""></span>
			</div>
			<div class="list">
				<div class="list_wrapper" v-for="item in PendencyItem" v-if="item">
					<div class="list_item2">
						<div class="right">
							<div class="list_item2_left"><img src="img/face.png"></div>
							<div class="list_item2_right">
								<span class="friend_name">{{item.Nick?item.Nick:item.To_Account}}</span>
								<span class="friend_desc">{{item.AddWording}}</span>
							</div>
						</div>
						<div class="left ispass" @click="responseFriend(item.To_Account,'Response_Action_AgreeAndAdd')">接受</div>
						<div class="left ispass" @click="responseFriend(item.To_Account,'Response_Action_Reject')">拒绝</div>
						<div class="left ispass" @click="deletePendency(item.To_Account)" style="background-color:#CCC;color:#fff">删除</div>
					</div>
					<!--<div class="list_item2">
						<div class="right">
							<div class="list_item2_left"><img src="img/face.png" alt=""></div>
							<div class="list_item2_right">
								<span class="friend_name">罗大锤</span>
								<span class="friend_desc">我是罗大锤，希望和你交流一下。</span>
							</div>
						</div>
						<div class="left passed">已添加</div>
					</div>-->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import $ from 'jquery'
import Client from "../../config/common";
export default {
    data(){
        return{
			loginInfo:{},
			PendencyItem:null
        }
    },
    created(){
		Client.login((loginInfo) => {
			 this.getPendency(loginInfo);
			 this.loginInfo = loginInfo;
		});
		
	},
	mounted(){
        
    },

    components:{
       // headTop
    },

    computed:{
	  
    },

    methods:{
       //读取好友申请列表
		getPendency(loginInfo) {
			//initGetPendencyTable([]);
			let options = {
				'From_Account': loginInfo.identifier,
				'PendencyType': 'Pendency_Type_ComeIn',
				'StartTime': 0,
				'MaxLimited': 100,
				'LastSequence': 0
			};
			webim.getPendency(
					options,
					(resp) => {
						console.log(resp);
						if (resp.UnreadPendencyCount > 0) {
							this.PendencyItem = resp.PendencyItem;
						}
					},
					function (err) {
						alert(err.ErrorInfo);
					}
			);
		},
		//处理好友申请
		responseFriend(To_Account,action) {
			let response_friend_item = [
				{
					'To_Account':To_Account,
					"ResponseAction": action
					//类型：Response_Action_Agree - 同意对方加自己为好友； 
					//	   Response_Action_AgreeAndAdd - 同意并添加对方为好友； 
					//	   Response_Action_Reject - 拒绝对方添加自己为好友。 
				}
			];
			let options = {
				'From_Account': this.loginInfo.identifier,
				'ResponseFriendItem': response_friend_item
			};
			webim.responseFriend(
					options,
					(resp) => {
						console.log(resp);
						console.log('处理好友申请成功');
						this.deleteTable(To_Account);
					},
					(err) => {
						alert(err.ErrorInfo);
					}
			);
		},
		//删除好友申请
		deletePendency(del_account) {
			var options = {
				'From_Account': this.loginInfo.identifier,
				'PendencyType': 'Pendency_Type_ComeIn',
				'To_Account': [del_account]
			};
			webim.deletePendency(
					options,
					(resp) => {
						this.deleteTable(del_account);
						console.log('删除好友申请成功',resp);
					},
					function (err) {
						alert(err.ErrorInfo);
				}
			);
		},
		//删除视图对应好友列表
		deleteTable(del_account){
			this.PendencyItem.forEach((ele,i) => {
				if(ele.To_Account == del_account){
					this.PendencyItem.splice(i,1);
				}
			});
		}
    },
}

</script>

<style lang="scss"> 
   @import '../../style/new_friend';
</style>